<template>
  <div class="container">
    <div class="top-nav">
      <TopNav/>
    </div>
    <div v-if="food" class="food-detail">
      <!--  头部  -->
      <div class="food-header">
        <div class="title-and-img" :style="{ backgroundColor: food.backgroundColor }">
          <h1>{{ food.name }}</h1>
          <img :src="food.image" :alt="food.name" class="food-image"/>
        </div>
        <h2>{{ food.describe }}</h2>
      </div>

      <div class="food-components">
        <!--   准备材料   -->
        <div class="ingredients">
          <Ingredients :ingredients="food.ingredients"/>
        </div>
        <!--   制作步骤   -->
        <div class="method">
          <Method
            :steps="food.method.steps"
            :prepTime="food.prepTime"
            :totalTime="food.totalTime"
            :serves="food.serves"
          />
        </div>
      </div>
    </div>
    <div v-else>
      <p>Loading...</p>
    </div>
    <!--  底部  -->
    <div style="margin-top: 50px">
      <Footer/>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { foodData, Food } from '@/data/foodData'
import TopNav from '@/components/TopNav.vue'
import Ingredients from '@/components/IngredientsBox.vue'
import Method from '@/components/MethodBox.vue'
import Footer from '@/components/FooterIndex.vue'

const route = useRoute()
const food = ref<Food | null>(null)

onMounted(() => {
  const foodSlug = route.params.slug as string
  food.value = foodData.find(item => item.slug === foodSlug) || null
})
</script>

<style scoped lang="scss">
.top-nav {
  width: 80%;
  z-index: 999;
  margin: 0 auto;
  @media (max-width: 786px) {
    width: 100%;
  }
}

.container {
  display: flex;
  flex-direction: column;
}

.food-detail {
  width: 75%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (max-width: 786px) {
    width: 100%;
  }
}

.food-header {
  width: 100%;

  .title-and-img {
    height: 380px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;

    h1 {
      width: 40%;
      font-size: 60px;
      text-align: left;
      position: absolute;
      left: 20px;
      bottom: -70px;
      display: flex;
      justify-content: center;
      align-items: center;

      @media (max-width: 768px) {
        width: 90%;
        height: 180px;
        text-align: center;
        font-size: 46px;
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    img {
      width: 500px;
      position: absolute;
      right: 20px;
      bottom: -90px;
      @media (max-width: 768px) {
        width: 400px;
        bottom: -70px;
        right: 0;
      }
    }
  }

  h2 {
    padding: 15px;
    margin-top: 50px;
    font-weight: normal;
    font-size: 24px;
    color: #66686E;
    text-align: left;

    @media (max-width: 768px) {
      font-size: 18px;
    }
  }

  @media (max-width: 768px) {
    width: 100%;
  }
}

.food-components {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 30px;
}

.ingredients {
  width: 340px;
}

.method {
  width: 100%;
}

/* 媒体查询：小屏幕时调整布局 */
@media (max-width: 768px) {
  .food-components {
    flex-direction: column;
    align-items: center;
  }

  .ingredients {
    width: 96%;
  }
  .method {
    width: 98%;
  }
}
</style>
